<template>
    <div class="roles-box">
        <!-- 导航 -->
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/home' }"
                >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card>
            <el-button type="primary">添加角色</el-button>
            <el-table :data="rolesList" border stripe style="width: 90%">
                <!-- 展开列 -->
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-row
                            v-for="(item1, index1) in scope.row.children"
                            :key="item1.id"
                            :class="[
                                'borderBottom',
                                index1 === 0 ? 'borderTop' : '',
                            ]"
                            type="flex"
                            align="middle"
                        >
                            <!-- 一级权限 -->
                            <el-col :span="6">
                                <el-tag>
                                    {{ item1.authName }}
                                </el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <!-- 二级 三级 权限 -->
                            <el-col :span="18">
                                <!-- 二级权限 -->
                                <el-row
                                    v-for="(item2, index2) in item1.children"
                                    :key="item2.id"
                                    :class="[index2 !== 0 ? 'borderTop' : '']"
                                    type="flex"
                                    align="middle"
                                >
                                    <el-col :span="6">
                                        <el-tag type="success">
                                            {{ item2.authName }}
                                        </el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <!-- 三级权限 -->
                                    <el-col :span="18">
                                        <el-tag
                                            type="success"
                                            v-for="item3 in item2.children"
                                            :key="item3.id"
                                            closable
                                            @close="
                                                deleteTag(scope.row, item3.id)
                                            "
                                        >
                                            {{ item3.authName }}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <!-- 索引列 -->
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column
                    label="角色名称"
                    prop="roleName"
                ></el-table-column>
                <el-table-column
                    label="角色描述"
                    prop="roleDesc"
                ></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            size="mini"
                            >编辑</el-button
                        >
                        <el-button
                            type="primary"
                            icon="el-icon-delete"
                            size="mini"
                            >删除</el-button
                        >
                        <el-button
                            type="primary"
                            icon="el-icon-setting"
                            size="mini"
                            @click="setRight(scope.row)"
                            >分配权限</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 设置权限对话框 -->
        <el-dialog
            title="设置权限"
            :visible.sync="setRightDialogVisible"
            width="50%"
            @close="rightDialogClose()"
        >
            <!-- 树形节点 -->
            <el-tree
                :data="rightTree"
                node-key="id"
                :props="treeData"
                show-checkbox
                default-expand-all
                :default-checked-keys="defaultKey"
                ref="treeRef"
            >
            </el-tree>

            <span slot="footer" class="dialog-footer">
                <el-button @click="setRightDialogVisible = false"
                    >取 消</el-button
                >
                <el-button type="primary" @click="editRight()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
  data: function () {
    return {
      // 角色列表数据
      rolesList: [],
      // 是否打开设置权限对话框
      setRightDialogVisible: false,
      // 角色权限数据
      rightTree: [],
      //   树形数据
      treeData: {
        label: 'authName',
        children: 'children'
      },
      //   默认选中的树形节点
      defaultKey: [],
      //   当前权限列表的id
      rolesId: ''
    }
  },
  created: function () {
    this.getRolesList()
  },
  methods: {
    getRolesList: async function () {
      const { data: res } = await this.$http.get('roles')
      this.rolesList = res.data
      // console.log(res.data)
    },
    // 删除权限标签
    deleteTag: async function (roles, i3id) {
      const confirmRes = await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmRes !== 'confirm') return this.$message.info('已经取消删除')
      const { data: res } = await this.$http.delete(`roles/${roles.id}/rights/${i3id}`)
      if (res.meta.status !== 200) return this.$message.error('删除失败')
      roles.children = res.data
      // 不能直接重新渲染列表 展开项会自动关掉
    },
    // 获取权限树形数据
    setRight: async function (roles) {
      // 打开对话框之前先获取数据
      const { data: res } = await this.$http.get('rights/tree')
      this.rightTree = res.data
      console.log(this.rightTree)

      // 同时获取三级节点
      this.getkeys(roles, this.defaultKey)
      this.rolesId = roles.id
      this.setRightDialogVisible = true
    },
    // 递归获取三级节点的id
    getkeys: function (node, arr) {
      // 如果当前节点没有children 则直接获取id
      if (!node.children) return arr.push(node.id)
      //   如果有就重新遍历数据，递归
      node.children.forEach(element =>
        this.getkeys(element, arr)
      )
    },
    rightDialogClose: function () {
      // 每次关闭对话框就清空当前勾选的复选框
      this.defaultKey = []
    },
    // 点击确定，修改对应的权限
    editRight: async function () {
      const keys = [...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys()]
      const keysStr = keys.join(',')
      const { data: res } = await this.$http.post(`roles/${this.rolesId}/rights`, { rids: keysStr })
      if (res.meta.status !== 200) return this.$message.error('分配权限失败')
      this.$message.success('分配权限成功')
      this.getRolesList()
      this.setRightDialogVisible = false
    }

  }

}
</script>
<style lang="less" scoped>
.roles-box {
    width: 90%;
}
.el-breadcrumb {
    font-size: 20px;
}
.el-card {
    margin-top: 10px;
    .el-table {
        margin-top: 9px;
    }
}

.el-tag {
    margin-top: 7px;
    margin-left: 5px;
}
.borderBottom {
    border-bottom: 1px solid #eee;
}
.borderTop {
    border-top: 1px solid #eee;
}
</style>
